<template>
	<view>
		<view class="HeaderGrid-box">
			<view class="HeaderGrid">
				<view class="left">
					<view class="title">
						<text class="title-text">{{title}}</text>
						<view class="hover"></view>
					</view>
				</view>
				<view class="conter"></view>
				<view class="right">
					<view class="grid">
						<view class="grid-item" 
						v-for="(item,index) in HeaderGridlist"
						:key="index"
						:data-click="item.click"
						>
							<view class="grid-Icons">
								<!-- #ifndef APP-NVUE -->
								<u-icon name="qiandao3" custom-prefix="custom-icon" size="60" color="#1b9df6"></u-icon>
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<view class="icons" v-if="item.AppIconsName=='&#xe6a1;'">
									<text class="nvueiconfont" :style="[{'color':'#bec5d3'},{'font-size':'60rpx'}]">&#xe6a1;</text>
								</view>
								<view class="icons" v-if="item.AppIconsName=='&#xe617;'">
									<text class="nvueiconfont" :style="[{'color':'#1b9df6'},{'font-size':'60rpx'}]">&#xe740;</text>
								</view>
								<view class="icons" v-if="item.AppIconsName=='&#xe637;'">
									<text class="nvueiconfont" :style="[{'color':'#cfd6e1'},{'font-size':'60rpx'}]">&#xe637;</text>
								</view>
								<view class="icons" v-if="item.AppIconsName=='&#xe67b;'">
									<text class="nvueiconfont" :style="[{'color':'#cfd6e1'},{'font-size':'60rpx'}]">&#xe67b;</text>
								</view>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		props:{
			// 数据列表
			HeaderGridlist:{
				type:Array,
				default:[]
			},
			title:{
				type:String,
				default:'熊猫视频'
			}
		},
		name:"HeaderGrid",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import './HeaderGrid.scss';
</style>
